<template>
  <div class="home">
    <el-container class="center">
<!--      顶部-->


          <el-header class="dinglang-shang">
            <div id="dinglang-d1">
              <el-dropdown size="small" split-button type="danger">
                <i class="el-icon-location"></i>France
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <i class="el-icon-user-solid">登录</i>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span style="color:white; margin-left: 10px"><i class="el-icon-phone">+ LeeJiEun518 </i></span>
            </div>
            <div id="dinglang-d2">
              <router-link to="/" style="color: white">
              <span><i class="el-icon-shopping-cart-full">购物车</i></span>
              </router-link>
              <router-link to="/"  style="color: white">
              <span style="margin-left: 10px;"><i class="el-icon-s-custom">登录</i></span>
              </router-link>
                <el-input style="margin-left: 10px; border-radius: 5px;border: 1px solid #7c001e;width:350px" placeholder="我要查找...(例如:petrus、Yquem等)">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
          </el-header>
<!--      中部-->
      <el-main class="zhongbu">
        <div style="margin-left: 460px">
          <img src="https://cdn.chateau.cn/themes/compressed/responsive/includes/shared/logo.svg">
          <h4 style="color: gainsboro;margin-left: 50px">出 色 的 酒 类 管 理 员</h4>
        </div>
        <el-divider style="margin: 0;padding: 0"><i class="el-icon-loading"></i></el-divider>
        <div>
          <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><i class="el-icon-s-grid"></i></el-menu-item>
            <el-submenu index="2">
              <template slot="title">波尔多</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">香槟</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">其他区域</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-submenu>
            <el-menu-item index="5">全球葡萄酒</el-menu-item>
            <el-menu-item index="6">烈酒</el-menu-item>
            <el-menu-item index="7"><a href="https://www.ele.me" target="_blank" style="text-decoration: none;">订单管理</a></el-menu-item>
          </el-menu>
        </div>
        <div style="margin-top: 15px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>所有的瓶子</el-breadcrumb-item>
            <el-breadcrumb-item>罗曼尼康帝</el-breadcrumb-item>
          </el-breadcrumb>
          <p style="font-size: 35px; color: gainsboro;margin-top: 10px">罗曼尼康帝</p>
        </div>

        <div class="zhonbu-xia">
          <el-row :gutter="20">
            <el-col :span="6"  style="margin-top: 25px;">
              <div style="display: flex">
                <img src="https://cdn.chateau.cn/themes/compressed/responsive/modules/listingHeader/images/credit-card.svg">
                <span style="margin-left: 5px;">网站和<br>
            通过Let's Encrypt的安全支付</span>
              </div>
            </el-col>
            <el-col :span="6" style="margin-top: 25px;">
              <div style="display: flex;">
                <img src="https://cdn.chateau.cn/themes/compressed/responsive/modules/listingHeader/images/box.svg" alt="">
                <span>安全交付<br>
            3至10个工作日</span>
              </div>
            </el-col>
            <el-col :span="6"  style="margin-top: 25px;">
              <div style="display: flex;">
                <img src="https://cdn.chateau.cn/themes/compressed/responsive/modules/listingHeader/images/wine.svg" alt="">
                <span>正品保证<br>
            产品100％经过鉴定</span>
              </div>
            </el-col>
            <el-col :span="6"  style="margin-top: 25px;">
              <div style="display: flex;">
                <img src="https://cdn.chateau.cn/themes/compressed/responsive/modules/listingHeader/images/call.svg" alt="">
                <span>个性化建议<br>
            拨打 +13453774582</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <div style="width: 1200px; margin: 0 auto">
      <template>
        <el-select style="width:150px" v-model="value">
          <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </template>
        <template style="margin-left: 20px">
          <el-select style="width:150px" v-model="value">
            <el-option
                v-for="items in options"
                :key="items.value"
                :label="itemslabel"
                :value="items.value">
            </el-option>
          </el-select>
        </template><br>
        <el-button style="margin-top: 10px;" plain size="small"  type="info" plain disabled><i style="align-items: center" class="el-icon-error">罗曼尼康帝</i></el-button>
        <br>
        <div style="width: 400px;margin-top: 15px">
        <p style="font-size: 20px"><i class="el-icon-caret-left"></i> 价格</p>
          <div style="margin-bottom: 20px; float: right"><i class="el-icon-arrow-up"></i></div>
          <el-divider></el-divider>
        </div>
      </div>
<!--      底部-->
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      option: [{
        value: '选项1',
        label: '简化视图'
      }, {
        value: '选项2',
        label: '详细视图'
      }],
      value:'',
      options: [{
        value: '选项1',
        label: '新品'
      }, {
        value: '选项2',
        label: '价格递增'
      },{
        value: '选项3',
        label: '价格递减'
      },{
        value: '选项4',
        label: '年份递增'
      },{
        value: '选项5',
        label: '年份递减'
      },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>
.dinglang-shang{
  background-color: red;
  height: 50px;
  margin: 0;
}
#dinglang-d1{
  float: left;
  margin-top: 12px;
  margin-left: 150px;
}
#dinglang-d2 {
  color: white;
  float: right;
  margin-top: 12px;
  margin-right: 150px;
}
.zhongbu{
  margin: 0 auto;
  width: 1200px;
}
.zhonbu-xia{
  padding: 0;
  margin-top: 80px;
  width: 1170px; height: 100px;
  background-color: gainsboro;
}
.zhonbu-xia img {
  width: 35px; height: 35px;
}

</style>